<!doctype html>
<html lang="en">

	<head>
		<meta charset="UTF-8" />
		<title>地址设置</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="css/mui.picker.css"/>
		<link rel="stylesheet" type="text/css" href="css/mui.poppicker.css"/>
		<style>
			#sub {
				margin: 30px 0;
				width: 100%;
			}
			
			.change {
				margin: 0;
			}
			
			.mui-input-group:after,
			.mui-input-group:before {
				height: 0;
			}
			
			.original {
				font-size: 16px;
				padding: 15px 0px 5px 30px;
			}
			
			.mui-table-view-cell:after{
				height: 0;
			}
			
		</style>
	</head>

	<body>

		<header class="mui-bar mui-bar-nav">
			<a href="javascript:history.go(-1)" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">收货地址</h1>
		</header>

		<div class="mui-content">
			<div class="mui-slider">
				<div class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<a class="mui-control-item" href="#item1">地址设置</a>
					<a class="mui-control-item" href="#item2">地址修改</a>
				</div>
				<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-6"></div>
				<div class="mui-slider-group">
					<div id="item1" class="mui-slider-item mui-control-content mui-act ive">
						<ul class="mui-table-view">
							<li class="mui-table-view-cell original">原地址:<span>北京市东城区天安门</span></li>
							<li class="mui-table-view-cell">
								<form class="mui-input-group">
									<div class="mui-input-row">
										<label>国家:</label>
										<input type="text" class="mui-input-clear" placeholder="中国">
									</div>
									<div class="mui-input-row">
										<label>市级地区:</label>
										<input type="text" class="mui-input-clear" name="city" id="picker" value="" placeholder="请点击">
									</div>
									<div class="mui-input-row">
										<label>详情地址:</label>
										<input type="text" class="mui-input-clear" placeholder="输入">
									</div>
									<div class="change">
										<button type="button" id="sub" class="mui-btn mui-btn-blue">修改</button>
									</div>
								</form>
							</li>
						</ul>
					</div>
					<div id="item2" class="mui-slider-item mui-control-content">
						<ul class="mui-table-view">
							<li class="mui-table-view-cell">
								<form class="mui-input-group">
									<div class="mui-input-row">
										<label>国家:</label>
										<input type="text" class="mui-input-clear" placeholder="中国">
									</div>
									<div class="mui-input-row">
										<label>市级地区:</label>
										<input type="text" class="mui-input-clear" name="city" id="edit_picker" value="" placeholder="请点击">
									</div>
									<div class="mui-input-row">
										<label>详情地址:</label>
										<input type="text" class="mui-input-clear" placeholder="输入">
									</div>
									<div class="change">
										<button type="button" id="sub" class="mui-btn mui-btn-blue">修改</button>
									</div>
								</form>
							</li>

						</ul>
					</div>
				</div>
			</div>
		</div>

		<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/mui.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/mui.picker.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/mui.poppicker.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/city.data-3.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			mui.init()
 			var picker = new mui.PopPicker({
 				layer: 3
 			});
 			 picker.setData(cityData3); 
 			 
 			 document.getElementById('picker').addEventListener('tap',e=>{
				let _this = $(e.target)
				picker.show(item=>{
					_this.val(item[0].text+' '+item[1].text+' '+item[2].text)
				})
 			 })
 			 document.getElementById('edit_picker').addEventListener('tap',e=>{
				let _this = $(e.target)
				picker.show(item=>{
					_this.val(item[0].text+' '+item[1].text+' '+item[2].text)
				})
 			 })
		</script>
	</body>

</html>